﻿
//counter variabel keeps tabs on current level, level = the amount of numbers for the user to remember.
var level = 2;

//stores the generated numbers for the current level.
var numberArray = new Array();

//Timer variable for how long the numbers/answer will be visible.
var timer = 0;

//state determines if the user's to enter numbers in normal or reversed order from which they are shown, 0 = normal, 1 = reversed.
var state = 0;

//Score variables from state 0 and 1.
state0Score = 0;
state1Score = 0;

//string containing numbers for the current level.
var numbers = "";

//array containing the users input.
var answerArray = new Array();

//keeps track of where in the array the input should be stored.
var currentAnswer = 0;

//array for the answer thats displayed on the screen contains underlines ("_") and numbers.
var answerStringArray = new Array();

//shows the btnHelp button when the document loads.
$(document).ready(function () {
    document.getElementById("btnHelp").style.display = "block";
   
});

//generates a number between min and max (both included)
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

//fills the "numbers" variable with 1 random int per level, then display the variable in #displayedNumbers Div.
function setIntegers(amount) {

    var array = [amount];
    numbers = "";

    for (i = 0; i < amount; i++) {

        array[i] = getRandomInt(1, 9);
    }

    for (var a in array) {
        numbers += array[a] + "   ";
    }

    numberArray = array;
    $("#displayedNumbers").text(numbers);
}

//Shows the first numbers and starts the timer.
function start() {
    setInterval(function () {
        //when the timer reached 5secs, the numbers fade out and the user input fades in.
        if (timer == 50) {
            answerFadeIn();
            underline();
            timer = 60;
        }
        //if the timer reaches 20sec the checkNumbers function is called with the current user input.
        if (timer == 210) {
            checkNumbers(answerArray);
        }
        timer++;
    }, 100);

    $("#logo").fadeOut(500);
    numbersFadeIn();
}

//puts an underline ("_ ") in the answerStringArray for each number in the numberArray, then its displayed in the input field.
function underline() {
    for (var i = 0; i < numberArray.length; i++) {
        answerStringArray[i] = "_ ";
        document.getElementById("input").innerHTML += answerStringArray[i];
    }
}

//this function is called whenever an input button is clicked. It adds the input buttons value to the answerArray.
function buttonClicked(objs) {

    answerArray[currentAnswer] = parseInt(objs.value);
    document.getElementById("input").innerHTML = "";

    //replaces the underline in the answerStringArray with the user input, and displays it in the input field.
    answerStringArray[currentAnswer] = objs.value + " ";
    for (var i = 0; i < answerStringArray.length; i++) {
        document.getElementById("input").innerHTML += answerStringArray[i];
    }
    currentAnswer++;
    //when the user inputs length is the same as the current levels length it calls the checkNumbers function.
    if (answerArray.length == numberArray.length) {
        checkNumbers(answerArray);
    }
}

//function for erasing the last input, and replace it with an underline in the input field.
function erasor() {
    if (currentAnswer > 0) {
        currentAnswer--;
        answerStringArray[currentAnswer] = "_ ";
        document.getElementById("input").innerHTML = "";
        for (var i = 0; i < answerStringArray.length; i++) {
            document.getElementById("input").innerHTML += answerStringArray[i];
        }
    }
}

//compares the randomized the numbers with the user's input.
function checkNumbers(userInput) {
    var input = JSON.stringify(userInput);
    $(".button").attr("disabled", "disabled");

    //if the state is 1, the numberArray is reversed.
    if (state == 1) {
        numberArray.reverse();
    }

    //Correct: If the the userInput matches numberArray.
    if (input == JSON.stringify(numberArray)) {

        // waits 1.5 seconds before going to next level.
        answerArray.length = 0;
        currentAnswer = 0;
        level++;
        correctAnswer(input);
        setTimeout(function () {
            document.getElementById("input").innerHTML = "";
            document.getElementById("correctAnswer").innerHTML = "";
            numbersFadeIn();
            timer = 0;
        }, 1500);

        //Wrong: If the user input differs from the numberArray
    } else {
       
        correctAnswer(input);
        //waits 5.5 seconds, then if state is 0, it goes to state 1. otherwise its gameOver().
        setTimeout(function () {
            if (state == 0) {
                state0Score = (parseInt(level) - 1);
                timer = 250;
                preState1();
            } else {
                state1Score = (parseInt(level) - 1);
                timer = 250;
                gameOver();
            }
        }, 5500);
    }
}

//displays the correct answer for the user to see.
function correctAnswer(userInput) {
    if (userInput == JSON.stringify(numberArray)) {
        document.getElementById("correctAnswer").style.color = "green";
    } else {
        document.getElementById("correctAnswer").style.color = "red";
    }

    
        
        if (state == 0) {
            document.getElementById("correctAnswer").innerHTML = numbers;
        } else {
            document.getElementById("correctAnswer").innerHTML = numbers.split("").reverse().join("");
        }
        $("#correctAnswer").fadeIn(500);
    
}

//the randomized numbers fade in.
function numbersFadeIn() {
    $("#info").fadeOut(500);
    $("#inputButtons").fadeOut(500);
    $("#answer").fadeOut(500);
    $("#buttons").fadeOut(500);
    $("#help").fadeOut(500);
    setTimeout(function () {
        setIntegers(level);
        document.getElementById("info").innerHTML = "Memorera dessa siffror";
        $("#numbers").fadeIn(500);
        $("#info").fadeIn(500);
    }, 500);
}
//the input field fades in.
function answerFadeIn() {
    document.getElementById("correctAnswer").innerHTML = "";
    document.getElementById("correctAnswer").style.display = "none";
    $("#info").fadeOut(500);
    $("#numbers").fadeOut(500);
    setTimeout(function () {
        if (state == 0) {
            document.getElementById("info").innerHTML = "Skriv in siffrorna nedanför";
        } else {
            document.getElementById("info").innerHTML = "Skriv in siffrorna nedanför<br>Baklänges!";
        }
        $("#inputButtons").fadeIn(500);
        $("#answer").fadeIn(500);
        $("#info").fadeIn(500);
        $(".button").removeAttr("disabled", "");
    }, 500);
}

//Preparation for state 1, gives the user some information and displays the btnContinue button.
function preState1() {
    $("#info").fadeOut(500);
    $("#inputButtons").fadeOut(500);
    $("#answer").fadeOut(500);
    setTimeout(function () {
        document.getElementById("correctAnswer").innerHTML = "";
        document.getElementById("info").innerHTML = "Steg 1 är klart!";
        document.getElementById("helpText").innerHTML = "I nästa steg ska du skriva in siffrorna du ser BAKLÄNGES. <br><br> Klicka på fortsätt för att starta Steg 2.";
        $("#help").fadeIn(500);
        $("#info").fadeIn(500);
        $("#buttons").fadeIn(500);
        document.getElementById("btnHelp").style.display = "none";
        document.getElementById("btnContinue").style.display = "block";
        $(".button").removeAttr("disabled", "");
    }, 500);

}

//reseting the game for state 1.
function state1() {
    answerArray.length = 0;
    numberArray.length = 0;
    currentAnswer = 0;
    answerStringArray.length = 0;
    document.getElementById("input").innerHTML = "";
    state++;
    level = 2;
    setIntegers(level);
    numbersFadeIn();
    timer = 0;
}

//displays text depending on users baseline.
function setBaselineText(result) {
    PageMethods.showBaseline(result, function (response) {
        document.getElementById("helpText").innerHTML = "Poäng på steg ett = " + state0Score + "<br>Poäng på steg två = " + state1Score + "<br><br> Total poäng = " + (state0Score + state1Score) + "<br><br>"+ response;
    });
}

//shows the game over screen.
function gameOver() {
    $("#info").fadeOut(500);
    $("#inputButtons").fadeOut(500);
    $("#answer").fadeOut(500);
    setTimeout(function () {
        document.getElementById("info").innerHTML = "Spelet är slut!";
        setBaselineText(state0Score + state1Score);
        $("#help").fadeIn(500);
        $("#info").fadeIn(500);
        $("#buttons").fadeIn(500);
        $(".button").removeAttr("disabled", "");
    }, 500);
    document.getElementById("btnSend").style.display = "block";
    document.getElementById("btnContinue").style.display = "none";
}

//shows the help screen.
function showHelp() {
    $("#logo").fadeOut(500);
    $("#buttons").fadeOut(500);
    setTimeout(function () {
        document.getElementById("helpText").innerHTML = "Spelet går ut på att memorera siffror. " +
            "Det kommer att visas ett antal siffror på skärmen. Du kommer få 5 sekunder på dig att" +
            " memorera dessa siffror, därefter försvinner siffrorna, och du kommer att få 15 sekunder " +
            "på dig att mata in de siffrorna som visades.<br /><br/> Klarar du detta kommer det visas siffror igen," +
            " denna gång en siffra mer än förut. Det kommer fortsätta så tills du misslyckas.<br/><br/>" +
            " När du har misslyckats kommer du till steg två. Det är samma princip fast du ska skriva in siffrorna" +
            " BAKLÄNGES. Du fortsätter tills du misslyckas. När du är färdig skickas resultatet.";
        document.getElementById("btnBack").style.display = "block";
        document.getElementById("btnHelp").style.display = "none";
        $("#help").fadeIn(500);
        $("#buttons").fadeIn(500);
    }, 500);

}

//go back to the start screen from the help screen.
function showLogo() {
    $("#help").fadeOut(500);
    $("#buttons").fadeOut(500);
    setTimeout(function () {
        document.getElementById("btnBack").style.display = "none";
        document.getElementById("btnHelp").style.display = "block";
        $("#logo").fadeIn(500);
        $("#buttons").fadeIn(500);
    }, 500);
}

//calls the SaveResult from codeBehind.
function SaveResult() {
    PageMethods.SaveResult((state0Score + state1Score));
    $(".button").attr("disabled", "disabled");
    setTimeout(function () {
        window.location = "main.aspx";
    }, 500);
}



